<template>
	<view class="wrap">
		<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/bg.png" class="bg-set" mode="">
		</image>
		<view class="avatar">
			<image class="img" :src="vuex_userInfo.avatarUrl" mode="">
			</image>

			<view class="info">
				<view class="top">
					{{vuex_userInfo.nickName}}
				</view>
				<!-- <view class="status">
					<text v-if="isVip">ID：3920497402</text>
					<text style="color: #8CC950;" v-else>点击立即登录</text>
				</view> -->
			</view>
		</view>
		<image   class="bgs3" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/20.png" mode="">
		</image>

		<view class="list" v-if="list1.length" >
			<view class="item" v-for="(item,index) in list1" @click="detail(item)">

				<view class="top">
					<view v-if="item.status==0" class="left">
						<image class="icon"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/order/1.png"
							mode=""></image>
						<text style="color: #FFBD5A;">{{item.vipName }}</text>
					</view>
					<view v-else class="left">
						<image class="icon"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/order/4.png"
							mode=""></image>
						<text style="color: #8CC950;">{{item.vipName}}</text>
					</view>
					
					
					<view v-if="item.status==1" class="right">
						<image class="status"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/order/3.png"
							mode="">
						</image>
						<!-- <!-- 支付状态 0未支付 1支付成功 2支付失败 -->
						<text>{{statusList[item.status]}}</text>
					</view>
					<view  v-else-if="item.status==0" class="right">
						<image class="status"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/order/2.png"
							mode="">
						</image>
						<text style="color: #FFC01F;">{{statusList[item.status]}}</text>
					</view>
					
					<view v-else class="right">
						<image class="status"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/fail.png"
							mode="">
						</image>
						<text style="color: red;">{{statusList[item.status]}}</text>
					</view>
				</view>
				<view class="bot">

					<view class="li">
						支付金额：{{item.price }}元
					</view>
					<view class="li">
						交易类型：{{item.payWay}}
					</view>
					<view class="li">
						订单编号：{{item.orderNo }}
						<image @click.stop="copy(item.orderNo)" class="copy"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/order/5.png"
							mode=""></image>
					</view>
					<view class="li">
						创建时间：{{item.createTime }}
					</view>
					<!-- 支付状态 0未支付 1支付成功 2支付失败 -->
					<view class="li" v-if="item.status!='0'">
						支付时间：{{item.payTime}}
					</view>
				</view>
			</view>
			
			<uni-load-more :status="status"></uni-load-more>

		</view>
		
		<view v-else class="empty">
			<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
				text="暂无数据" mode="list"></u-empty>
		</view>

	</view>
</template>
<script>
	export default {

		data() {
			return {
				// 0 1 2
				statusList:['未支付','支付成功','支付失败'],
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],


				// 苹果手机
				isIPhone: false,
				// 用户状态 0游客 1非游客
				userStatus: 0,
				nickname: '游客',
				// 用户头像
				avatarUrl: '',
				// 会员到期时间
				vipExpireTime: '',
				// 是否是会员
				isVip: true,
			}
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getlist();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		onLoad() {
			this.getlist()
		},
		mounted() {
			uni.hideLoading()
		},
		methods: {
			detail(item) {
				
				uni.navigateTo({
					url: "/subpackMain/user/orderDetail?id=" + item.id
				})
			},
			// 获取订单列表
			getlist() {
				this.senDate = false;
				this.$u.api.mine.order_list({
						page: this.formData.page,
						size: this.formData.pageSize,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			// 获取会员信息
			getVipInfo() {
				this.$u.api.mine.getVipInfo().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}
				})
			},
			copy(val) {
				uni.setClipboardData({
					data: val, // 必须字符串
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});

					}
				});
			}
		}
	};
</script>

<style>
	page {
		background: linear-gradient(180deg, #131420 0%, #131420 16%);
	}
</style>
<style scoped lang="scss">
	.bgs3 {
		width: 100%;
		height: 166rpx;
		margin-top: -22px;
	}

	.bg-set {
		height: 227rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.avatar {
		display: flex;
		padding-top: 62rpx;
		// align-items: center;
		height: 227rpx;


		.img {
			width: 103rpx;
			height: 103rpx;
			border-radius: 50%;
			position: relative;
			margin-right: 28rpx;
			margin-left: 8rpx;
		}


		.info {
			flex: 1;

			.top {
				font-size: 32rpx;
				margin-bottom: 5rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 14px;
				
				// line-height: 38rpx;
			}

			.status {
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #737B9A;
				// line-height: 26rpx;
			}
		}
	}

	.wrap {
		margin: 32rpx;

		.list {
			margin-top: -166rpx;
			position: relative;
			z-index: 5;

			.item {
				margin-bottom: 32rpx;
				padding: 0 32rpx;
				border-radius: 22rpx;
				background: rgba(45, 48, 85, 0.35);

				.bot {
					padding: 20rpx 0;
					line-height: 49rpx;
					font-size: 22rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					color: #adaeb5;

					.li {
						display: flex;
						align-items: center;

					}

					.copy {
						width: 30rpx;
						height: 30rpx;
						margin-left: 15rpx;
					}
				}

				.top {
					padding: 32rpx 0 20rpx 0;
					border-bottom: 1rpx solid rgba(115, 123, 154, 0.3);
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.icon {
							width: 47rpx;
							height: 38rpx;
						}

						text {
							font-size: 30rpx;
							font-family: PingFang HK-Light, PingFang HK;
							font-weight: 300;
							color: #FFFFFF;
							margin-left: 10rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.status {
							width: 32rpx;
							height: 32rpx;
							margin-right: 13rpx;
						}

						text {
							font-size: 24rpx;
							font-family: PingFang HK-Light, PingFang HK;
							font-weight: 300;
							color: #16AC51;
						}
					}

				}
			}
		}

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}


	}
</style>
